  <template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <div v-if="crud.props.searchToggle">
          <!-- 搜索 -->
          <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item"
                    @keyup.enter.native="crud.toQuery"/>
          <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
            <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
          </el-select>
          <rrOperation :crud="crud"/>
        </div>

        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <crudOperation :permission="permission"/>
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                   :title="crud.status.title" width="700px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">

            <el-form-item label="美甲师" prop="manicuristId">
              <el-input
                  v-if="false"
                  v-model="form.manicuristId"
                  style="width: 370px;"
              />
              <div v-if="form.manicuristId">
                {{ dialogTableDataManicuristId.showInputValue }}
              </div>
              <!-- 新增组件弹出式表单 -->
              <dialogTable
                  :dialogTableData.sync="dialogTableDataManicuristId"
                  @select-callback="dialogTableSelectedCallBackManicuristId"
              ></dialogTable>
            </el-form-item>

            <el-form-item label="产品" prop="productId">
              <el-input
                  v-if="false"
                  v-model="form.productId"
                  style="width: 370px;"
              />
              <div v-if="form.productId">
                {{ dialogTableDataProductId.showInputValue }}
              </div>
              <!-- 新增组件弹出式表单 -->
              <dialogTable
                  :dialogTableData.sync="dialogTableDataProductId"
                  @select-callback="dialogTableSelectedCallBackProductId"
              ></dialogTable>
            </el-form-item>

            <el-form-item label="xs数量" prop="numXscm">
              <el-input v-model="form.numXscm" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="s数量" prop="numScm">
              <el-input v-model="form.numScm" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="m数量" prop="numMcm">
              <el-input v-model="form.numMcm" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="l数量" prop="numLcm">
              <el-input v-model="form.numLcm" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="总数量">
              <el-input v-model="form.totalNum" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remake" style="width: 370px;"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                  @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55"/>
          <el-table-column v-if="columns.visible('manicuristName')" prop="manicuristName" label="美甲师"/>
          <el-table-column v-if="columns.visible('manicuristCode')" prop="manicuristCode" label="美甲师编码"/>
          <el-table-column v-if="columns.visible('productName')" prop="productName" label="产品名称"/>
          <el-table-column v-if="columns.visible('productCode')" prop="productCode" label="产品编码"/>
          <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="日期">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('')" prop="" label="当日生产">
            <el-table-column v-if="columns.visible('numXscm')" prop="numXscm" label="xs数量"/>
            <el-table-column v-if="columns.visible('numScm')" prop="numScm" label="s数量"/>
            <el-table-column v-if="columns.visible('numMcm')" prop="numMcm" label="m数量"/>
            <el-table-column v-if="columns.visible('numLcm')" prop="numLcm" label="l数量"/>
            <el-table-column v-if="columns.visible('totalNum')" prop="totalNum" label="总数量"/>
          </el-table-column>
          <el-table-column v-if="columns.visible('remake')" prop="remake" label="备注"/>
          <el-table-column v-permission="['admin','manicuristProductRecord:edit','manicuristProductRecord:del']"
                           label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <udOperation
                  :data="scope.row"
                  :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination/>
      </div>
    </div>
  </template>

  <script>
  import crudManicuristProductRecord from '@/api/tanzer/manicuristProductRecord'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import MaterialList from "@/components/material";
  import dialogTable from "@/views/components/dialogTable";
  import {initData} from "@/api/data";

  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '美甲师生产记录',
    url: 'api/manicuristProductRecord',
    sort: 'id,desc',
    crudMethod: {...crudManicuristProductRecord}
  })
  const defaultForm = {
    id: null,
    manicuristId: null,
    productId: null,
    xsNum: null,
    sNum: null,
    mNum: null,
    lNum: null,
    totalNum: null,
    remake: null,
    createTime: null,
    updateTime: null,
    isDel: null
  }
  export default {
    name: 'ManicuristProductRecord',
    components: {pagination, crudOperation, rrOperation, udOperation, MaterialList, dialogTable},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {

        permission: {
          add: ['admin', 'manicuristProductRecord:add'],
          edit: ['admin', 'manicuristProductRecord:edit'],
          del: ['admin', 'manicuristProductRecord:del']
        },
        rules: {
          manicuristId: [
            {required: true, message: '美甲师id不能为空', trigger: 'blur'}
          ],
          productId: [
            {required: true, message: '产品id不能为空', trigger: 'blur'}
          ]
        },
        queryTypeOptions: [
          {key: 'manicuristId', display_name: '美甲师id'},
          {key: 'productId', display_name: '产品id'}
        ],
        dialogTableDataManicuristId: {
          title: "美甲师列表",
          dialogVisible: false,
          url: "api/manicurist",
          sort: "id,desc",
          buttonContext: "请选择美甲师",
          showInputValue: "",
          queryTypeOptions: [
            {key: "id", display_name: "美甲师id"},
            {key: "manicuristName", display_name: "美甲师名称"},
            {key: "manicuristCode", display_name: "美甲师编码"}
          ],
          elTtableColumns: [
            {
              columnProp: "manicuristName",
              columnLabel: "美甲师名称"
            },
            {
              columnProp: "manicuristCode",
              columnLabel: "美甲师编码"
            },
          ]
        },
        dialogTableDataProductId: {
          title: "产品列表",
          dialogVisible: false,
          url: "api/tanzer/product/",
          sort: "id,desc",
          buttonContext: "请选择产品",
          showInputValue: "",
          queryTypeOptions: [
            {key: "id", display_name: "产品id"},
            {key: "productName", display_name: "产品名称"},
            {key: "productNameCode", display_name: "产品编码"}
          ],
          elTtableColumns: [
            {
              columnProp: "productName",
              columnLabel: "产品名称"
            },
            {
              columnProp: "productCode",
              columnLabel: "产品编码"
            },
          ]
        },
      }
    },
    watch: {},
    methods: {

      data() {
        return {
          allColumnsSelected: true,
          allColumnsSelectedIndeterminate: false
        }
      },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        const query = this.query
        if (query.type && query.value) {
          this.crud.params[query.type] = query.value
        } else {
          delete this.crud.params.manicuristId
          delete this.crud.params.productId
        }
        return true
      }, // 新增与编辑前做的操作

      //自定义弹窗字段回写
      setInputValue(
          dialogTableData,
          showInputValue,
          form,
          id,
          content,
          index,
          value,
          url,
          params
      ) {
        dialogTableData[showInputValue] = "";
        if (form[id]) {
          initData(url, params).then(res => {
            console.log("res", res);
            dialogTableData[showInputValue] = res[content][index][value];
          });
        }
      },
      [CRUD.HOOK.afterToEdit](crud, form) {

        //产品字段自定义弹窗回写
        this.setInputValue(
            this.dialogTableDataProductId,
            "showInputValue",
            form,
            "productId",
            "content",
            0,
            "productName",
            "api/tanzer/product/",
            {
              page: 0,
              size: 10,
              sort: "id,desc",
              id: form.productId
            }
        );
        //产品字段自定义弹窗回写

        //美甲师字段自定义弹窗回写
        this.setInputValue(
            this.dialogTableDataManicuristId,
            "showInputValue",
            form,
            "manicuristId",
            "content",
            0,
            "manicuristName",
            "api/manicurist/",
            {
              page: 0,
              size: 10,
              sort: "id,desc",
              id: form.manicuristId
            }
        );
        //美甲师字段自定义弹窗回写
      },

      [CRUD.HOOK.afterToAdd](crud, form) {},
      [CRUD.HOOK.afterToCU](crud, form) {    },



      //美甲师字段自定义弹窗回写
      dialogTableSelectedCallBackManicuristId(row) {
        this.form.manicuristId = row.id;
        if (this.form.manicuristId) {
          this.dialogTableDataManicuristId.showInputValue = row.manicuristName;
        }
      },

      //产品字段自定义弹窗回写
      dialogTableSelectedCallBackProductId(row) {
        this.form.productId = row.id;
        if (this.form.productId) {
          this.dialogTableDataProductId.showInputValue = row.productName;
        }
      },

    }
  }
  </script>

  <style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  </style>
